<div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
  <div class="formio-form" ref="webform" novalidate>
    <div id="test" class="mb-2 formio-form-group has-feedback formio-component formio-component-hidden formio-component-test  formio-component-label-hidden" ref="component">
      <div ref="element">
        <input ref="input" name="data[test]" type="hidden" class="form-control" lang="en" value="" id="test-test" aria-labelledby="l-test-test " aria-required="false"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="container" class="mb-2 formio-form-group has-feedback formio-component formio-component-container formio-component-container  formio-component-label-hidden" ref="component">
      <div ref="nested-container">
        <div id="containerText" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-containerText " ref="component">
          <label ref="label" class="col-form-label " for="containerText-containerText" id="l-containerText-containerText">
            Text
          </label>
          <div ref="element">
            <input ref="input" name="data[container][containerText]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="containerText-containerText" aria-labelledby="l-containerText-containerText " aria-required="false"></input>
          </div>
          <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="dataGrid" class="mb-2 formio-form-group has-feedback formio-component formio-component-datagrid formio-component-dataGrid " ref="component">
      <label ref="label" class="col-form-label " for="dataGrid-dataGrid" id="l-dataGrid-dataGrid">
        Data Grid
      </label>
      <table class="table datagrid-table table-bordered
    ">
        <thead>
          <tr>
            <th class="">
              Show Header
              <i ref="tooltip" tabindex="0" data-title="My Tooltip" class="bi bi-question-circle text-muted" data-tooltip="My Tooltip"></i>
            </th>
            <th class="">
            </th>
            <th class="">
            </th>
            <th class="">
              Show Both
            </th>
          </tr>
        </thead>
        <tbody ref="datagrid-dataGrid-tbody" data-key="datagrid-dataGrid">
          <tr ref="datagrid-dataGrid-row">
            <td ref="datagrid-dataGrid">
              <div id="dataGridText" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText  formio-component-label-hidden" ref="component">
                <div ref="element">
                  <input ref="input" name="data[dataGrid][0][dataGridText]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText-dataGridText" aria-labelledby="l-dataGridText-dataGridText " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="datagrid-dataGrid">
              <div id="dataGridText3" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText3  formio-component-label-hidden" ref="component">
                <div ref="element">
                  <input ref="input" name="data[dataGrid][0][dataGridText3]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText3-dataGridText3" aria-labelledby="l-dataGridText3-dataGridText3 " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="datagrid-dataGrid">
              <div id="dataGridText2" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText2 " ref="component">
                <label ref="label" class="col-form-label " for="dataGridText2-dataGridText2" id="l-dataGridText2-dataGridText2">
                  Show Row
                </label>
                <div ref="element">
                  <input ref="input" name="data[dataGrid][0][dataGridText2]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText2-dataGridText2" aria-labelledby="l-dataGridText2-dataGridText2 " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="datagrid-dataGrid">
              <div id="dataGridText4" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText4 " ref="component">
                <label ref="label" class="col-form-label " for="dataGridText4-dataGridText4" id="l-dataGridText4-dataGridText4">
                  Show Both
                </label>
                <div ref="element">
                  <input ref="input" name="data[dataGrid][0][dataGridText4]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText4-dataGridText4" aria-labelledby="l-dataGridText4-dataGridText4 " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
          </tr>
          <tr ref="datagrid-dataGrid-row">
            <td ref="datagrid-dataGrid">
              <div id="dataGridText" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText  formio-component-label-hidden" ref="component">
                <div ref="element">
                  <input ref="input" name="data[dataGrid][1][dataGridText]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText-dataGridText" aria-labelledby="l-dataGridText-dataGridText " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="datagrid-dataGrid">
              <div id="dataGridText3" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText3  formio-component-label-hidden" ref="component">
                <div ref="element">
                  <input ref="input" name="data[dataGrid][1][dataGridText3]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText3-dataGridText3" aria-labelledby="l-dataGridText3-dataGridText3 " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="datagrid-dataGrid">
              <div id="dataGridText2" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText2 " ref="component">
                <label ref="label" class="col-form-label " for="dataGridText2-dataGridText2" id="l-dataGridText2-dataGridText2">
                  Show Row
                </label>
                <div ref="element">
                  <input ref="input" name="data[dataGrid][1][dataGridText2]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText2-dataGridText2" aria-labelledby="l-dataGridText2-dataGridText2 " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="datagrid-dataGrid">
              <div id="dataGridText4" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText4 " ref="component">
                <label ref="label" class="col-form-label " for="dataGridText4-dataGridText4" id="l-dataGridText4-dataGridText4">
                  Show Both
                </label>
                <div ref="element">
                  <input ref="input" name="data[dataGrid][1][dataGridText4]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText4-dataGridText4" aria-labelledby="l-dataGridText4-dataGridText4 " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
          </tr>
          <tr ref="datagrid-dataGrid-row">
            <td ref="datagrid-dataGrid">
              <div id="dataGridText" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText  formio-component-label-hidden" ref="component">
                <div ref="element">
                  <input ref="input" name="data[dataGrid][2][dataGridText]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText-dataGridText" aria-labelledby="l-dataGridText-dataGridText " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="datagrid-dataGrid">
              <div id="dataGridText3" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText3  formio-component-label-hidden" ref="component">
                <div ref="element">
                  <input ref="input" name="data[dataGrid][2][dataGridText3]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText3-dataGridText3" aria-labelledby="l-dataGridText3-dataGridText3 " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="datagrid-dataGrid">
              <div id="dataGridText2" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText2 " ref="component">
                <label ref="label" class="col-form-label " for="dataGridText2-dataGridText2" id="l-dataGridText2-dataGridText2">
                  Show Row
                </label>
                <div ref="element">
                  <input ref="input" name="data[dataGrid][2][dataGridText2]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText2-dataGridText2" aria-labelledby="l-dataGridText2-dataGridText2 " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="datagrid-dataGrid">
              <div id="dataGridText4" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGridText4 " ref="component">
                <label ref="label" class="col-form-label " for="dataGridText4-dataGridText4" id="l-dataGridText4-dataGridText4">
                  Show Both
                </label>
                <div ref="element">
                  <input ref="input" name="data[dataGrid][2][dataGridText4]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGridText4-dataGridText4" aria-labelledby="l-dataGridText4-dataGridText4 " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="5">
              <button class="btn btn-primary formio-button-add-row" ref="datagrid-dataGrid-addRow" tabindex="0">
                <i class="bi bi-plus-lg"></i> Add Another
              </button>
            </td>
          </tr>
        </tfoot>
      </table>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="dataGrid2" class="mb-2 formio-form-group has-feedback formio-component formio-component-datagrid formio-component-dataGrid2 " ref="component">
      <label ref="label" class="col-form-label " for="dataGrid2-dataGrid2" id="l-dataGrid2-dataGrid2">
        Data Grid
      </label>
      <table class="table datagrid-table table-bordered
    ">
        <tbody ref="datagrid-dataGrid2-tbody" data-key="datagrid-dataGrid2">
          <tr ref="datagrid-dataGrid2-row">
            <td ref="datagrid-dataGrid2">
              <div id="dataGrid2Text" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-dataGrid2Text  formio-component-label-hidden" ref="component">
                <div ref="element">
                  <input ref="input" name="data[dataGrid2][0][dataGrid2Text]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="dataGrid2Text-dataGrid2Text" aria-labelledby="l-dataGrid2Text-dataGrid2Text " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="datagrid-dataGrid2">
              <div id="text" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-text  formio-component-label-hidden" ref="component">
                <div ref="element">
                  <input ref="input" name="data[dataGrid2][0][text]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="text-text" aria-labelledby="l-text-text " aria-required="false"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td>
              <button type="button" class="btn btn-secondary formio-button-remove-row" ref="datagrid-dataGrid2-removeRow" tabindex="0" aria-label="remove" style="display: block; margin: 0 auto">
                <i class="bi bi-x-circle"></i>
              </button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">
              <button class="btn btn-primary formio-button-add-row" ref="datagrid-dataGrid2-addRow" tabindex="0">
                <i class="bi bi-plus-lg"></i> Add Another
              </button>
            </td>
          </tr>
        </tfoot>
      </table>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="show" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-show " ref="component">
      <div class="form-check checkbox">
        <input ref="input" id="show-show" aria-labelledby="l-show-show" name="data[show]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
        <label class=" form-check-label" for="show-show" id="l-show-show">
          <span>Show</span>
        </label>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="conditionalDataGrid" class="mb-2 formio-form-group has-feedback formio-component formio-component-datagrid formio-component-conditionalDataGrid " ref="component">
      <label ref="label" class="col-form-label " for="conditionalDataGrid-conditionalDataGrid" id="l-conditionalDataGrid-conditionalDataGrid">
        Conditional Data Grid
      </label>
      <table class="table datagrid-table table-bordered
    ">
        <thead>
          <tr>
            <th class="">
              Show2
            </th>
            <th>
              <span class="visually-hidden">Add/Remove</span>
            </th>
          </tr>
        </thead>
        <tbody ref="datagrid-conditionalDataGrid-tbody" data-key="datagrid-conditionalDataGrid">
          <tr ref="datagrid-conditionalDataGrid-row">
            <td ref="datagrid-conditionalDataGrid">
              <div id="conditionalDataGridShow2" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-conditionalDataGridShow2  formio-component-label-hidden" ref="component">
                <div class="form-check checkbox">
                  <input ref="input" id="conditionalDataGridShow2-conditionalDataGridShow2" aria-labelledby="l-conditionalDataGridShow2-conditionalDataGridShow2" name="data[conditionalDataGrid][0][conditionalDataGridShow2]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="false">
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td>
              <button type="button" class="btn btn-secondary formio-button-remove-row" ref="datagrid-conditionalDataGrid-removeRow" tabindex="0" aria-label="remove" style="display: block; margin: 0 auto">
                <i class="bi bi-x-circle"></i>
              </button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">
              <button class="btn btn-primary formio-button-add-row" ref="datagrid-conditionalDataGrid-addRow" tabindex="0">
                <i class="bi bi-plus-lg"></i> Add Another
              </button>
            </td>
          </tr>
        </tfoot>
      </table>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="editGrid" class="mb-2 formio-form-group has-feedback formio-component formio-component-editgrid formio-component-editGrid " ref="component">
      <label ref="label" class="col-form-label " for="editGrid-editGrid" id="l-editGrid-editGrid">
        Edit Grid
      </label>
      <ul class="editgrid-listgroup list-group
    ">
        <li class="list-group-item list-group-header">
          <div class="row">
            <div class="col-sm-2">
              Text
            </div>
            <div class="col-sm-2">
              Text
            </div>
          </div>
        </li>
      </ul>
      <button class="btn btn-primary" ref="editgrid-editGrid-addRow">
        <i class="bi bi-plus-lg"></i> Add Another
      </button>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="submit" class="mb-2 formio-form-group has-feedback formio-component formio-component-button formio-component-submit  mb-2 formio-form-group" ref="component">
      <button ref="button" name="data[submit]" type="submit" class="btn btn-primary btn-md" lang="en">
        Submit
      </button>
      <div ref="buttonMessageContainer">
        <span class="help-block" ref="buttonMessage"></span>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
  </div>
  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
</div>